<template>
  <div class="doge-code-editor-container">
    <div class="doge-code-editor" ref="dogeCodeEditor"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'

const dogeCodeEditor = ref()

self.MonacoEnvironment = {
  getWorker(workerId, label) {
    return new editorWorker();
  },
};

let editor = null;

onMounted(() => {
   editor = monaco.editor.create(dogeCodeEditor.value,
      {
        value: "",
        placeholder: "Enter your SQL code here...",
        language: 'sql',
        cursorBlinking: 'smooth',
        cursorStyle: 'block',
        cursorSmoothCaretAnimation: true,
        renderLineHighlight: 'line',
        minimap: {
          enabled: false,
        },
      }
  )
})

function setEditorCode (code) {
  if (editor) editor.setValue(code)
}

function getEditorCode () {
  if (editor) return editor.getValue()
}

defineExpose({
  setEditorCode, getEditorCode
})
</script>


<style scoped>
.doge-code-editor {
  width: 100%;
  height: 100%;
}


.doge-code-editor-container {
  width: 100%;
  height: 100%;
}

</style>